/*
 * @Author: jiu yin
 * @Date: 2024-05-07 14:09:35
 * @LastEditTime: 2024-06-19 17:39:50
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\scene_studio\component\PicoList.tsx
 * jiu
 */
import { list_device } from "@/api/home";
import PicoListCom from "@/comment/PicoList";
import Modal_edit from "@/comment/modal_edit";
import { Tabs } from "antd";
import { useEffect, useState } from "react";

export default function PicoList(props: any) {
	let { status, isModalOpen, top_info } = props;

	let [devices_list_data, set_devices_list_data] = useState<any>([]);
	let [current_key, set_current_key] = useState<number>(status);
	useEffect(() => {
		list_device({ status: current_key }).then((res: any) => {
			set_devices_list_data(res.data.data);
		});
	}, [current_key]);

	const items = [
		{
			key: "1",
			label: `当前空闲(${top_info.idle_devices})`,
		},
		{
			key: "2",
			label: `使用中(${top_info.busy_devices})`,
		},
		{
			key: "3",
			label: `异常(${top_info.abnormal_devices})`,
		},
	];
	//tabs
	const onChange = (key: string) => {
		console.log(key);
		set_current_key(Number(key));
	};

	return (
		<Modal_edit title="我的MR设备" isModalOpen={isModalOpen} width={1300}>
			<div>
				<Tabs defaultActiveKey={String(current_key)} items={items} onChange={onChange} />
				<div className="min-h-400px">
					<PicoListCom list={devices_list_data}></PicoListCom>
				</div>
			</div>
		</Modal_edit>
	);
}
